﻿@using AmorCanino.Web.Models.Models;
@model Pet
@{
    Layout = "~/Views/Shared/_LayoutWithoutCategory.cshtml";
    ViewBag.Title = @Model.PetName;

    var isAuthenticated = AmorCanino.Web.Models.Authentication.AuthUser.Current() != null;
    string picture = string.Empty;
    string pictureRepository = AmorCanino.Common.ConfigurationHandler.GetPuctirePath;
    var age = Math.Round((DateTime.Now - Model.BirthDate.Value).TotalDays / 365, 0);
    if (Model.HasPicture)
    {
        picture = Url.Content("~/ImageServices/getThumbnail.pet?pictureId=" + Model.PetId.ToString() + "&pictureType=adopt&s=190");
    }
}
@section CSS{
    <link href="@Url.Content("~/content/lightbox.css")" rel="stylesheet" />
}
@section JavaScript{
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.simplemodal.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/MessageService.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/lightbox.js")"></script>
}
<div class="detail-pet-container">
    <div class="image-column" style="float: left; margin-right: 10px;">
        <div class="main-image">
            @if (Model.HasPicture)
            {
                <a href="@(pictureRepository + Model.PetId.ToString()).jpg" rel="lightbox">
                    <img src="@picture" alt="@Model.PetName" title="@Model.PetName" style="width:190px; height:190px; cursor: pointer;" />
                </a>
            }
        </div>
        <div style="width: 190px; margin-top: 10px;">
            @if (Model.OtherPictures.Count() > 0)
            {
                foreach (var otherPic in Model.OtherPictures)
                {
                    string resultPath = Url.Content("~/ImageServices/getThumbnail.pet?pictureId=" + otherPic.ToString() + "&pictureType=adopt&s=65");
                    
                    <div style="float: left; margin-right: 5px;">
                        <a href="@(pictureRepository + otherPic.ToString()).jpg" rel="lightbox">
                            <img src="@resultPath" style="width: 65px; height: 65px; cursor: pointer;" />
                        </a>
                    </div>
                }
            }
        </div>
    </div>
    <div>
        <h2>@Model.PetName</h2>
        <div>Raza: @Model.ReceName</div>
        <div>Edad: @string.Format("{0} año{1}", age.ToString(), age != 1 ? "s" : "")</div>
        <div style="display:inline-block; margin-top:20px;">
            <h1 style="margin-bottom: 10px;">Contactar con el dueño</h1>
            @if (isAuthenticated)
            {
                if (Model.IsForAdoption)
                {
                <div style="float:left; margin-right: 20px;">
                    <div class="InvertedActionButton adoptionButton">Adoptar</div>
                </div>
                }
                if (Model.IsForMate)
                {
                <div style="float:left;">
                    <div class="InvertedActionButton brithButton">Cruzar</div>
                </div>
                }
            }
            else
            {
                <div>Para poder contactarte con sus dueños necesitas estar registrado</div>
            }
        </div>
    </div>
</div>

@Html.Hidden("ContactURL", Url.Action("SetMessage","Services"))
@Html.Hidden("DestinationID", Model.UserId)
@Html.Hidden("TargetPet", Model.PetName)

<div style="display:none;">
    <div id="contactForm" style="background-color:White; max-width:400px; padding: 20px; border:1px solid black;">
        <div class="formContent">
	        <h1>Contactar al dueño</h1>
            <p>Mediante el siguiente formulario se enviará un mensaje al dueño para informarle de su interés por <strong><span class="dogName">@Model.PetName</span></strong>.</p>
            <p>Si lo desea, puede agregar un mensaje a continuación:</p>
            <div>
                <textarea cols="30" rows="4" id="additionalMessage"></textarea>
                <p id="remainChars" style="font-size: 8pt; margin: 0; margin-bottom: 10px; color: gray;"></p>
            </div>
            <div><input type="button" value="Contactar" id="sendContact" /> <input type="button" value="Cancelar" id="cancelContact"/></div>
        </div>
        <div style="display: none;" class="okMessage">
            <h1>El mensaje ha sido enviado correctamente</h1>
        </div>
    </div>
</div>